<template>
    <div class="el-timeline-box boxx">
        <el-timeline class="box">
            <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp">
            <el-card>
                <h4>{{activity.title}}</h4>
                <span>{{activity.describe}}</span>
                <!-- <p>{{activity.timestamp}}</p> -->
                <p>{{activity.describe2}}</p>
                <p>{{activity.describe3}}</p>
            </el-card>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
import anime from 'animejs'
export default {
  data () {
    return {
      activitie: [{
        title: 'ProximaB项目',
        describe: '对象管理页面的右侧大小类，告警管理模块',
        describe2: '完成告警管理模块的前端80%的工作',
        describe3: '',
        timestamp: '2020-05-26',
        size: 'large',
        type: 'primary',
        // icon: 'el-icon-more'
        // color: '#0bbd87'
        color: '#03a9f4'
      }, {
        title: '图灵网站',
        describe: '静态页面的编写',
        timestamp: '2020-06-05',
        color: '#03a9f4'
      }, {
        title: 'proximaB验证的demo',
        describe: '麻雀虽小，五脏俱全，从地球到站点到点击站点进入园区都有',
        timestamp: '2020-04-03',
        size: 'large',
        color: '#03a9f4'
      },
      {
        title: '深圳银行的3Ddemo',
        describe: '默认样式的节点',
        timestamp: '2020-06-28',
        color: '#03a9f4'
      },
      {
        title: '陕西智慧园区3D地球项目',
        describe: '默认样式的节点',
        timestamp: '2020-07-13',
        color: '#03a9f4'
      },
      {
        title: '河北电力',
        describe: '默认样式的节点',
        timestamp: '2020-07-23',
        color: '#03a9f4'
      },
      {
        title: '北京轨道交通demo',
        describe: '修改文字',
        timestamp: '2020-07-23',
        color: '#03a9f4'
      }
      ],
      activities: []
    }
  },
  methods: {
    getData () {
      this.activities = this.activitie
      this.$nextTick(() => {
        this.listAnimate()
      })
    },
    // 列表入场动画
    listAnimate () {
      anime({
        targets: '.boxx ul li',
        translateX: [-20, 0],
        opacity: [0, 1],
        easing: 'linear',
        duration: 300,
        delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.el-timeline-box {
  margin-top: 5vh;
  width: 100%;
  display: flex;
  justify-content: center;

  .box {
    width: 80%;
  }
}
</style>
